<?php

/**
 * @file
 * Custom theme implementation to display a single Drupal page.
 */

?>

<!-- Navbar -->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- endbuild -->
</head>

<input id="farmer" type="hidden" value="false">

<body ng-app="onlineChat">
<div class="chat-title">
    <img src="<?php echo _get_user_profile()?>" width="40px" height="40px" style="border-radius: 50%" class="chat-title-img"/>
    <?php
        global $user;
        $user_info = _get_user_info($user->uid);
    ?>
    <span class="chat-title-name"><?php echo $user_info['name']?></span>
    <div class="chat-short-img">
        <a href="javascript:void window.open('<?php echo base_path(); ?>manage_chat/friend/list','_blank', 'width=1440,height=900,toolbar=1,menubar=1,location=1,status=1,scrollbars=1,resizable=1,fullscreen=1,left=0,top=0');"><img src="<?php echo base_path()?>sites/all/modules/contact/css/1.png" title="管理好友"></a>
        <a href="javascript:void window.open('<?php echo base_path(); ?>manage_chat/message/list','_blank', 'width=1440,height=900,toolbar=1,menubar=1,location=1,status=1,scrollbars=1,resizable=1,fullscreen=1,left=0,top=0');"><img src="<?php echo base_path()?>sites/all/modules/contact/css/2.png" title="消息记录"></a>
        <a href="javascript:void window.open('<?php echo base_path(); ?>manage_chat/room/list','_blank', 'width=1440,height=900,toolbar=1,menubar=1,location=1,status=1,scrollbars=1,resizable=1,fullscreen=1,left=0,top=0');"><img src="<?php echo base_path()?>sites/all/modules/contact/css/3.png" title="管理聊天室"></a>
        <a href="javascript:void window.open('<?php echo base_path(); ?>manage_chat/groups/list','_blank', 'width=1440,height=900,toolbar=1,menubar=1,location=1,status=1,scrollbars=1,resizable=1,fullscreen=1,left=0,top=0');" ><img src="<?php echo base_path()?>sites/all/modules/contact/css/4.png" title="管理聊天类别"></a>
    </div>
</div>
<div class="window" ng-controller="MainCtrl">
    <div class="left" id="contact-list">
        <ul class="conv-list">
            <div ng-if="_app_name!='expert'" ng-repeat="(groupKey, chatIds) in groups">
                <p class="group-title">{{groupKey}}<span class="chat-arrow">︿</span></p>
                <li ng-repeat="chatValue in chats | groupBy:chatIds | orderObjectBy:'timestamp':'timestamp':'true'">
                    <a href="#" ng-click="viewChatDetail(chatValue.id, chatValue)">
                        <div class="chat-status">
                            <figure class="status__avatar">
                                <img ng-src="{{getChatViewPic(chatValue)}}">
                            </figure>
                            <div class="meta">
                                <div>
                                    <span>{{getChatViewName(chatValue.id, chatValue)}}</span>
                                    <span
                                        class="meta__sub--light">{{displayDateTime(chatValue.timestamp,true)}}</span>
                                </div>
                                <last-message messages="chatValue.messages" index="$index" users="chatValue.user"
                                              self-id="{{uid}}" chat-id="chatValue.id"
                                              current-chat-id="chatDetailId"
                                              checkpoint="chatValue.checkpoint"></last-message>
                            </div>
                        </div>
                    </a>
                </li>
            </div>

            <div ng-if="_app_name=='expert'">
                <p class="group-title">今天</p>
                <li ng-repeat="chatValue in chats | filterDateBy:'today' | orderObjectBy:'timestamp':'timestamp':'true'">
                    <a href="#" ng-click="viewChatDetail(chatValue.id, chatValue)">
                        <div class="chat-status">
                            <figure class="status__avatar">
                                <img ng-src="{{getChatViewPic(chatValue)}}">
                            </figure>
                            <div class="meta">
                                <div>
                                    <span>{{getChatViewName(chatValue.id, chatValue)}}</span>
                                    <span
                                        class="meta__sub--light">{{displayDateTime(chatValue.timestamp,true)}}</span>
                                </div>
                                <last-message messages="chatValue.messages" index="$index" users="chatValue.user"
                                              self-id="{{uid}}" chat-id="chatValue.id"
                                              current-chat-id="chatDetailId"
                                              checkpoint="chatValue.checkpoint"></last-message>
                            </div>
                        </div>
                    </a>
                </li>
            </div>

            <div ng-if="_app_name=='expert'">
                <p class="group-title">昨天</p>
                <li ng-repeat="chatValue in chats | filterDateBy:'yesterday' | orderObjectBy:'timestamp':'timestamp':'true'">
                    <a href="#" ng-click="viewChatDetail(chatValue.id, chatValue)">
                        <div class="chat-status">
                            <figure class="status__avatar">
                                <img ng-src="{{getChatViewPic(chatValue)}}">
                            </figure>
                            <div class="meta">
                                <div>
                                    <span>{{getChatViewName(chatValue.id, chatValue)}}</span>
                                    <span
                                        class="meta__sub--light">{{displayDateTime(chatValue.timestamp,true)}}</span>
                                </div>
                                <last-message messages="chatValue.messages" index="$index" users="chatValue.user"
                                              self-id="{{uid}}" chat-id="chatValue.id"
                                              current-chat-id="chatDetailId"
                                              checkpoint="chatValue.checkpoint"></last-message>
                            </div>
                        </div>
                    </a>
                </li>
            </div>

            <div ng-if="_app_name=='expert'">
                <p class="group-title">更早以前</p>
                <li ng-repeat="chatValue in chats | filterDateBy:'older' | orderObjectBy:'timestamp':'timestamp':'true'">
                    <a href="#" ng-click="viewChatDetail(chatValue.id, chatValue)">
                        <div class="chat-status">
                            <figure class="status__avatar">
                                <img ng-src="{{getChatViewPic(chatValue)}}">
                            </figure>
                            <div class="meta">
                                <div>
                                    <span>{{getChatViewName(chatValue.id, chatValue)}}</span>
                                    <span
                                        class="meta__sub--light">{{displayDateTime(chatValue.timestamp,true)}}</span>
                                </div>
                                <last-message messages="chatValue.messages" index="$index" users="chatValue.user"
                                              self-id="{{uid}}" chat-id="chatValue.id"
                                              current-chat-id="chatDetailId"
                                              checkpoint="chatValue.checkpoint"></last-message>
                            </div>
                        </div>
                    </a>
                </li>
            </div>
        </ul>
    </div>

    <!--<div ng-include="'views/chatDetail.html'"></div>-->
    <div class="chat-view">
        <header class="chat-view__header">
            <div class="cf">
                <div class="status">
                    <div class="meta" ng-if="_app_name!='expert'">
                        <div class="meta__name">{{chatDetailName}}</div>
                    </div>
                    <div class="meta" ng-if="_app_name=='expert'">
                        <span class="meta__name"><a href="http://www.metercomm.com.cn/zhaozhuanjia/user/{{clientId}}"
                                                    target="_blank">{{chatDetailUsers[clientId].name}}</a></span>
                        &nbsp;咨询&nbsp;
                        <span ng-if="nid!=0" class="meta__name"><a
                                href="http://www.metercomm.com.cn/zhaozhuanjia/node/{{nid}}" target="_blank">{{chatDetailName}}</a></span>
                    </div>
                </div>
            </div>
        </header>
        <div class="right" id="message-list">
            <!--      <div class="chat-msg"><span class="close-chat-msg" onclick="meg_alert()">×</span><div id="alertMsg" style="float:left;"></div></div>-->
            <div class="message-view" message-data detail-messages="chatDetailMessages" detail-users="chatDetailUsers"
                 self-id="{{uid}}" scroll="scrollTopOrBottom" switch-chat="switchChat">
                    <a href="#" class="historyLink" ng-click="viewHistoryMessage(chatDetailId, chatDetailMessages)" ng-show="showHistoryMessageLink">查看历史消息</a>
                    <div id="mainMessages"></div>
            </div>
        </div>

        <footer class="chat-view__input">
            <div>
                <textarea id="editArea" class="messageToSend" rows="10" cols="10" placeholder="Ctrl+Enter发送"></textarea>
            </div>
            <div class="action">
                <div id="sendDiv">
                    <input id="sendButton" type="button" class="btn_send" value="发送" ng-click="sendMessageOrFile()"/>
                </div>
                <div id="fileDiv">
                    <label id="fileUploadButton">
                        <input id="file" type="file"/>
                    </label>
                </div>
                <div id="progressbar">
                    <div class="outbar">
                        <div class="inbar-filename"></div>
                        <div class="inbar" style="width:{{percentage}}%;">
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>


<script>
    jQuery(document).ready(function () {
        jQuery("#file").change(function (e) {
            window.file = e.target.files[0];
            jQuery(".inbar-filename").html(window.file.name);
            jQuery('#progressbar').show();
            jQuery('.window').scope().$apply(function(scope){
                scope.percentage = 0;
            });
        });
        jQuery('#editArea').keydown(function (e) {
            if (e.ctrlKey && e.keyCode == 13 && !jQuery('#sendButton').attr("disabled")) {
                jQuery('#sendButton').trigger('click');
            }
        });
        jQuery('p').live('click', function () {
            jQuery(this).nextAll().slideToggle("fast");
            if(jQuery('.chat-arrow').html() == '︿'){
                jQuery('.chat-arrow').html('﹀')
            }else{
                jQuery('.chat-arrow').html('︿')
            }

        });
        jQuery('#progressbar').hide();
    });

</script>

</body>
</html>
